<template>
  <div class="main">
    <div id="top">
      <div id="overview">
        <h3 id="days">当月出勤人数及天数</h3>
        <h3 id="day">出勤总天数</h3>
        <p id="sumday">{{ day }}天</p>
        <div id="grap"></div>
        <h3 id="person">出勤人数</h3>
        <p id="members" style="color: orange">{{ person }}人</p>
      </div>
      <div id="rate"></div>
      <div id="case"></div>
    </div>
    <div id="chart1"></div>
    <div id="upload">
      <h3 id="uploadtitle">上传考勤信息</h3>
      <el-upload
      id="uploadbtn"
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
        
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <h3 id="tips"><em style="color:red">*</em>&nbsp;&nbsp;提示：</h3>
      <p id="tipmsg">上传文件时，请按示例xlsx文件进行填写考勤信息，然后上传</p>
      <h3 id="compants"><em style="color:red">*</em>&nbsp;&nbsp;模板：</h3>
      <a id="download" href="/assets/images/database.png" download>点击下载</a>
    </div>
  </div>
</template>
<script>
import countApi from "@/api/index";
import * as echarts from "echarts";
import indexCharts from "@/js/indexCharts";
export default {
  data() {
    return {
      day: new Date().getDate() - 4,
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      person: 0,
      dayOption: {
        title: {
          text: "异常考勤信息",
          x: "center",
          y: "top",
        },
        tooltip: {},
        legend: {
          bottom: "bottom",
          orient: "vertical",
          textStyle: {
            fontSize: "16px",
          },
        },
        series: [
          {
            type: "pie", // 设置图表类型为饼图
            radius: "70%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [
              {
                name: "缺卡人数",
                value: 20,
              },
              {
                name: "迟到人数",
                value: 4,
              },
              {
                name: "早退人数",
                value: 5,
              },
              {
                name: "旷工人数",
                value: 2,
              },
            ],
            color: ["#04C9EB", "#F4E303", "#12FF05", "#FD7104"],
          },
        ],
      },
      departmentOption: {
        title: {
          text: "部门出勤天数",
          x: "center",
          y: "top",
        },
        tooltip: {},
        legend: {
          data: ["出勤天数"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "天数",
            type: "bar",
            barWidth: 50,
            data: [],
            color: ["#0CE5EC"],
          },
        ],
      },
      restOption: {
        title: {
          text: "近半个月正常考勤统计",
          textStyle: {
            fontSize: "20px",
          },
        },
        tooltip: {},
        legend: {
          data: ["正常出勤人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        toolbox: {
          feature: {
            saveAsImage: {
              namea: "保存考勤信息",
            },
          },
        },
        series: [
          {
            name: "正常出勤人数",
            type: "line",
            stack: "总数",
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    drawRate() {
      //缺勤情况
      let rateChart = echarts.init(document.getElementById("rate"));
      rateChart.setOption(this.dayOption);
    },
    //各部门出勤情况
    drawDepartment() {
      let departmenteChart = echarts.init(document.getElementById("case"));
      departmenteChart.setOption(this.departmentOption);
    },
    //近半个月正常出勤情况
    drawNomal() {
      let nomal = echarts.init(document.getElementById("chart1"));
      nomal.setOption(this.restOption);
    },
  },
  created() {
    countApi
      .getcompanyDatas()
      .then((response) => {
        this.person = response.list.allCount;
      })
      .catch((err) => {
        this.$message.error("网络繁忙，请稍后重试");
      });
    countApi
      .getAllDatas()
      .then((response) => {
        let list = response.list;
        let deptList = [];
        let number = [];
        for (let index = 0; index < list.length; index++) {
          const element = list[index];
          deptList.push(element.name);
          number.push(parseInt(Math.random() * 20) + 1);
        }
        this.departmentOption.xAxis.data = deptList;
        this.departmentOption.series[0].data = number;
        this.drawDepartment();
      })
      .catch((err) => {
        this.$message.error("网络繁忙，请稍后重试");
      });
    let day = new Date().getDate();
    let dayList = [];
    let count = [];
    for (let index = day - 15; index <= day; index++) {
      dayList.push(index);
      count.push(parseInt(Math.random() * 59 + 1));
    }
    this.restOption.xAxis.data = dayList;
    this.restOption.series[0].data = count;
    console.log(this.restOption);
  },
  mounted() {
    this.drawRate();
    this.drawDepartment();
    this.drawNomal();
  },
};
</script>
<style  scoped  >
.main {
  display: flex;
  flex-flow: column wrap;
  justify-items: flex-start;
  width: 100%;
  height: 100%;
}
#top {
  height: 250px;
  width: 98%;
  position: absolute;
  top: 160px;
  left: 1%;
  display: flex;
  flex-flow: row wrap;
  justify-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#overview {
  width: 20%;
  height: 100%;
  border-right: 2px rgba(0, 0, 0, 0.12) dotted;
}
#rate {
  padding: 0;
  width: 25%;
  height: 100%;
  border-right: 2px rgba(0, 0, 0, 0.12) dotted;
}
#case {
  width: 50%;
  height: 100%;
}
#days,
#attentionmsg {
  color: rgb(88, 88, 88);
  position: relative;
  left: 20px;
  margin: 0px;
}
#day {
  font-size: 20px;
  color: grey;
  text-align: center;
  position: relative;
  top: 5px;
}
#person {
  font-size: 20px;
  color: grey;
  text-align: center;
  margin: 0;
}
#sumday {
  font-size: 30px;
  text-align: center;
  position: relative;
  top: -10px;
  color: rgb(126, 196, 202);
}
#members {
  font-size: 30px;
  text-align: center;
  position: relative;
  top: -10px;
}
#grap {
  width: 100%;
  height: 1px;
  border: 1px solid gainsboro;
  margin: auto;
  position: relative;
  top: -20px;
}
#rateimg {
  width: 100%;
  height: 100%;
  margin: auto;
}
#chart1 {
  width: 98%;
  margin-left: 1%;
  margin-top: 28%;
  height: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#upload {
  width: 32%;
  height: 155px;
  margin-left: 1%;
  line-height: 100%;
  padding: auto;
  margin-top: 3%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.12);
}
#uploadbtn{
  margin-left: 150px;
  position: relative; 
  top: 5px;
}

#uploadtitle{
  display: inline;
  position: relative;
  top: 30px;
  left: 20px;
}
#tips{
  display: inline;
    
   position: relative;
   top: 30px;
   left: 20px;
}
#tipmsg{
  margin-left: 90px;
}
#compants{
  margin-left: 20px;
  position: relative;
}
#download{
  margin-left: 90px;
  position: relative;
  top: -35px;
  font-size: 18px;
  color: blue;
  text-decoration: underline blue;
}
#download::before{
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('~@/assets/images/excel.png');
}
</style>